window.onload = function () {
  // 面板的显示
  displayPanel();
  //面板关闭
  panelHide();
  //qq面板 微信面板切换
  contentPanel();
  //点击全选按钮
  selectAll();
  //密码登录和二维码登录页面切换
  handoffQQandWechat();
  //邮箱登录
  const submit = document.querySelector("#submit");
  const username = document.querySelector("#username");
  const password = document.querySelector("#pwd");
  submit.addEventListener("click", function (e) {
    let user = username.value;
    let pwd = password.value;
    emailLogin(user, pwd);
    phoneLogin(user,pwd);
  });
  getQRcode();



   /*游客登录*/

  const visitor = document.querySelector(".visitor");
  visitor.onclick = function () {
    function visitorLogin() {
    $ajax({
      method: "post",
      url: "http://cloud-music.pl-fe.cn/register/anonimous",
      success: function (e) {
        console.log(e);
        if(e.code === 200){
          getPeopleName(e.userId)
        }
      },
    });
  };
  visitorLogin()
}

};

  /*面板显示*/

function displayPanel() {
  const login = document.querySelector(".login"),
    mask = document.querySelector(".mask");
  login.addEventListener("click", function (e) {
    e.preventDefault();
    mask.classList.remove("none");
  });
}
  /*面板关闭*/
function panelHide() {
  const close = document.querySelector(".close"),
    mask = document.querySelector(".mask");
  close.addEventListener("click", function (e) {
    mask.classList.add("none");
  });
}

/*qq面板 微信面板切换(html结构写的有点问题)*/
function contentPanel() {
  const loginqq = document.querySelector(".login1-qq"),
    loginwechat = document.querySelector(".login1-wechat"),
    qqcontent = document.querySelector(".login1-qq-content"),
    wechatcontent = document.querySelector(".login1-content-wechat");

  loginqq.addEventListener("click", function (e) {
    loginqq.classList.add("active");
    loginwechat.classList.remove("active");
    qqcontent.classList.remove("none");
    wechatcontent.classList.add("none");
  });

  loginwechat.addEventListener("click", function (e) {
    loginqq.classList.remove("active");
    loginwechat.classList.add("active");
    qqcontent.classList.add("none");
    wechatcontent.classList.remove("none");
  });
}

/*点击全选按钮*/
function selectAll() {
  const All = document.querySelector(".yuan");
  const single = document.querySelector(".yuan1");

/*
 *  isOk = true的封装
 */
function bthTrue(icon,color){
  All.classList.add(icon);
  single.classList.add(icon);
  All .style.color = color;
  single.style.color =color;
}
/*
 *  isOk = flase的封装
*/
function bthFlase(icon,color){
  All.classList.remove(icon);
  single.classList.remove(icon);
  All .style.color = color;
  single.style.color =color;
}

  let isOk = true;
  All.onclick = function () {
    if (isOk) {
      bthTrue("icon-dui","#2e77e5")
    } else {
      bthFlase("icon-dui","#333")
    }
    isOk = !isOk;
  };
  single.onclick = function () {
   isOk ? bthTrue("icon-dui","#2e77e5") :   bthFlase("icon-dui","#333");
   isOk = !isOk;
  };
}

//密码登录和二维码登录页面切换

function handoffQQandWechat() {
  const loginpwd = document.querySelectorAll(".login-pwd");
  const login1MiddleLeft = document.querySelectorAll(".login1-middle-left");
  [...loginpwd].forEach(function (item, index) {
    item.addEventListener("click", function (e) {
      e.preventDefault();
      [...loginpwd].forEach(function (item, index) {
        login1MiddleLeft[index].classList.remove("none");
      });
      login1MiddleLeft[index].classList.add("none");
    });
  });
}

//邮箱登录
const password = document.querySelector(".password");
password.onclick = function () {
  
}
function emailLogin(user, pwd) {
  $ajax({
    url: "http://cloud-music.pl-fe.cn/login",
    method: "post",
    headers: {
      "Content-Type": "application/json",
    },

    data: {
      email: user,
      password: pwd,
    },
    success: function (e) {
      if (e.code === 200) {
        //获取登录成功信息
        console.log(e.account);
        localStorage.setItem("token", e.data);
        getPeopleName(e.account.userName)
      }
    },
  });
}

// 手机登录

    function phoneLogin(user,pwd) {
    $ajax({
      method: "post",
      url: "http://cloud-music.pl-fe.cn/login/cellphone",
      headers: {
        "Content-Type": "application/json",
      },
      data: {
        email: user,
        password: pwd,
      },

      success: function (e) {
        if (e.code === 200) {
          console.log(e);
          localStorage.setItem("token", e.data);
          getPeopleName(e.account.userName)
        }
      },
    });
  };


//二维码登录
function getQRcode() {
  $ajax({
    method: "post",
    url: "http://cloud-music.pl-fe.cn/login/qr/key",
    success: function (e) {
      if (e.code === 200) {
        console.log(e);
        localStorage.setItem("token", e.unikey);
        $ajax({
          method: "post",
          url: "http://cloud-music.pl-fe.cn/login/qr/create?key=60b8fcac-a9e7-4dec-9e73-da6df461902f",
          success: function (e) {
            console.log(e);
            const iframe = document.createElement("iframe");
            const login1 = document.querySelector(".login1-middle-left-qrcode");
            console.log(login1);
            const QRimg = document.querySelector(".pic");
            iframe.src =
              "https://music.163.com/login?codekey=60b8fcac-a9e7-4dec-9e73-da6df461902f";
            login1.append(iframe);
            QRimg.remove();
            if (e.code == 200) {
              $ajax({
                method: "post",
                url: "http://cloud-music.pl-fe.cn/login/qr/check?key=60b8fcac-a9e7-4dec-9e73-da6df461902f",
                success: function (e) {
                  console.log(e);
                },
              });
            }
          },
        });
      }
    },
  });
}
// 获取用户名并且跳转页面
function getPeopleName(obj){

  const mask = document.querySelector(".mask");
  mask.classList.add("none");
  //把登录换为个人名字
  const login = document.querySelector(".login");
  login.innerHTML = `欢迎用户${obj}`;

  login.onclick = function () {
    //  点击个人按钮切换个人页面
    window.location.replace("http://127.0.0.1:5500/people.html");
  };
}